//获取canvas元素
const cav=document.getElementById('bg');

//获取窗口的宽高
const width=window.innerWidth,
    height=window.innerHeight;

//设置canvas尺寸为窗口尺寸
cav.width=width;
cav.height=height;

//获取给绘制上下文
const ctx=cav.getContext("2d");

//列宽
const columnWidth=20;

//列数
const columnCount=Math.floor(width/columnWidth);

//记录每列写到第几个字符
const columnNextIndex=new Array(columnCount);
columnNextIndex.fill(1); 

//绘制函数
function draw(){
    //初始化变成半透明
    ctx.fillStyle=`rgba(240,240,240,0.1)`;
    ctx.fillRect(0,0,width,height);
    const fz=20;
    ctx.fillStyle=getRandomColor();
    ctx.font=`${fz}px "Roboto Mono`;
    for(var i=0;i<columnCount;i++){
        const x=i*columnWidth;
        const y=fz*columnNextIndex[i];
        ctx.fillText(getRandomChar(),x,y);
        if(y>height&&Math.random()>0.9){
            columnNextIndex[i]=0;
        }else{
            columnNextIndex[i]++;
        }
    }
}

//随机颜色
function getRandomColor(){
    const fontColors=[
        '#33B5E5',
        '#32B3d5',
        '#33B5E5',
        '#13A5E5',
        '#32B5B5',
        '#33B5A5',
        '#53A5E5',
        '#43B5E5',
        '#22B5E5',
    ]
    // return fontColors[Math.floor(Math.random()*fontColors.length)];
    return '#'+Math.random().toString(16).substring(2,8);
}

//随机文字
function getRandomChar(){
    // const str='console.log(hello world")';
    const str='选项显示的内容，默认会读取 slot，无 slot 时，优先读取该 label 值，无 label 时，读取 value。当选中时，选择器会显示 label 为已选文案。大部分情况不需要配置此项，直接写入 slot 即可，在自定义选项时，该属性非常有用。'
    return str[Math.floor(Math.random()*str.length)];
}
setInterval(draw,40)